<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vector Database Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
        rel="stylesheet">
</head>

<body class="bg-gray-100 flex flex-col items-center justify-center h-screen">
<div class="bg-white p-8 rounded shadow-md w-full">
  <h1 class="text-2xl font-bold mb-4">Vector Database Demo</h1>
  <form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput"
           class="border border-gray-300 p-2 w-full mb-4 rounded">
    <button type="submit" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">Upload File
    </button>
  </form>
  <div id="uploadStatus" class="mt-4"></div>
  <form id="searchForm">
    <input type="text" name="query" id="queryInput" placeholder="Enter your query"
           class="border border-gray-300 p-2 w-full mb-4 rounded">
    <button type="submit" class="bg-green-500 text-white p-2 rounded hover:bg-green-600">Search
    </button>
  </form>
  <div id="searchResults" class="mt-4"></div>
</div>
<script>
  const uploadForm = document.getElementById('uploadForm');
  const uploadStatus = document.getElementById('uploadStatus');
  const searchForm = document.getElementById('searchForm');
  const searchResults = document.getElementById('searchResults');

  uploadForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const file = document.getElementById('fileInput').files[0];
    const formData = new FormData();
    formData.append('file', file);
    const response = await fetch('/embd/upload', {
      method: 'POST',
      body: formData
    });
    const result = await response.text();
    uploadStatus.textContent = result;
  });

  searchForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const query = document.getElementById('queryInput').value;
    const response = await fetch(`/embd/search?query=${encodeURIComponent(query)}`);
    const results = await response.json();
    searchResults.innerHTML = '';
    results.forEach(result => {
      const p = document.createElement('p');
      p.textContent = JSON.stringify(result);
      searchResults.appendChild(p);
    });
  });
</script>
</body>

</html>